<template>
  <div class="app-container">
    <div class="baseTop-title">
      <span>财务信息</span>
    </div>
    <a-form :form="queryForm" :model="queryParams" ref="queryForm" v-show="showSearch" layout="inline" laba-width="68px"
      class="mb-16">
      <a-form-item v-for="item in queryItems" :label="item.title" :key="item.dataIndex">
        <a-input v-if="item.component == 'Input'" v-model="queryParams[item.dataIndex]" :placeholder="item.placeholder ? item.placeholder : '请输入' + item.title
          " />
        <a-select v-else-if="item.component == 'Select'" v-model="queryParams[item.dataIndex]" :placeholder="item.placeholder ? item.placeholder : '请输入' + item.title
          " :options="item.componentProps.options" />
        <a-range-picker v-else-if="item.component == 'Range-picker'" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"
          v-model="queryParams[item.dataIndex]" />
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" ghost @click="handleQuery"> 搜索 </a-button>
          <a-button @click="resetQuery"> 重置 </a-button>
        </a-space>
      </a-form-item>
    </a-form>

    <a-space class="mb-8">
      <a-button type="primary" ghost @click="handleAdd">新增</a-button>
      <a-button type="success" plain :disabled="single" @click="handleUpdate">
        修改
      </a-button>
      <a-button type="danger" plain :disabled="multiple" @click="handleDelete">
        删除
      </a-button>
      <!-- <a-button type="warning" plain @click="handleExport"> 导出 </a-button> -->
    </a-space>

    <a-table :scroll="{ x: 1500 }" :loading="loading" :columns="columns" :data-source="tableData" :row-selection="{
      onChange: handleSelectionChange,
    }" :pagination="{
      onChange: getList,
      total: total,
      pageSize: queryParams.pageSize,
      current: queryParams.pageNum,
    }" class="table">
      <a-space slot="action" slot-scope="text, record">
        <a-button size="small" type="link" @click="handleUpdate(record)">
          修改
        </a-button>
        <a-button size="small" type="link" @click="handleDelete(record)">
          删除
        </a-button>
      </a-space>
    </a-table>

    <!-- 添加或修改信息对话框 -->
    <a-modal :title="title" v-model="open" width="60%" append-to-body :maskClosable="false" :forceRender="true">
      <a-form-model ref="form" :model="formData" :rules="rules">
        <template>
          <a-row type="flex" class="row-bg">
            <a-col v-for="index in formConfg.group" :span="24 / formConfg.group" :key="index">
              <template v-for="item of formConfg.formItems[index - 1]">
                <a-form-model-item v-if="!item.hidden" :label="item.title" :label-col="formConfg.labelCol"
                  :wrapper-col="formConfg.wrapperCol" :key="item.dataIndex" :prop="item.dataIndex">
                  <a-input v-if="item.component == 'Input'" v-model="formData[item.dataIndex]" :placeholder="item.placeholder
                    ? item.placeholder
                    : '请输入' + item.title
                    " />
                  <a-select v-else-if="item.component == 'Select'" v-model="formData[item.dataIndex]" :placeholder="item.placeholder
                    ? item.placeholder
                    : '请输入' + item.title
                    " :options="item.componentProps.options" />
                  <a-date-picker v-else-if="item.component == 'Date-picker'" format="YYYY-MM-DD"
                    valueFormat="YYYY-MM-DD" v-model="formData[item.dataIndex]" :placeholder="item.placeholder
                      ? item.placeholder
                      : '请输入' + item.title
                      " />
                  <a-upload v-else-if="item.component == 'Upload'" :action="UploadUrl"
                    @change="(e) => handleUpload(e, item.dataIndex)" :fileList="fileList" :headers="headers"
                    v-model="formData[item.dataIndex]" :placeholder="item.placeholder
                      ? item.placeholder
                      : '请输入' + item.title
                      ">
                    <a-button> <a-icon type="upload" /> 上传 </a-button>
                  </a-upload>
                </a-form-model-item>
              </template>
            </a-col>
          </a-row>
        </template>
      </a-form-model>
      <div slot="footer" class="dialog-footer">
        <a-button type="primary" @click="submitForm">确 定</a-button>
        <a-button @click="cancel">取 消</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {
  queryItems,
  columns,
  formItems,
  formConfg,
  api,
  rules,
} from "./config";
import { getToken } from "@/utils/auth";

export default {
  name: "FinancialInfo",
  data () {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      tableData: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 检索项
      queryItems: queryItems(),
      // 列表
      columns: columns(),
      // 表单
      formItems: formItems(),
      // 表单配置
      formConfg: formConfg(),
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 查询表单
      queryForm: this.$form.createForm(this, { name: "queryForm" }),
      // 校验规则
      rules: rules,
      // 表单参数
      formData: {},
      // 上传列表
      fileList: [],
      // 上传地址
      UploadUrl: GolbUrl.BASIC_UPLOAD_URL,
      // 上传头部
      headers: {
        Authorization: "Bearer " + getToken(),
      },
    };
  },
  created () {
    this.getList();
  },
  methods: {
    /** 查询信息列表 */
    getList () {
      this.loading = true;
      api.list(this.queryParams).then((response) => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel () {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset () {
      this.formData = { status: 1 };
      console.log(this.$refs);
      this.$refs["form"].resetFields();
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.queryForm.resetFields();
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      if (selection) {
        this.ids = selection.map((item) => this.tableData[item].id);
        this.single = selection.length !== 1;
        this.multiple = !selection.length;
      }
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset();
      this.open = true;
      this.title = "添加信息";
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      this.reset();
      const id = row.id || this.ids;
      api.one(id).then((response) => {
        this.$nextTick(() => {
          this.formData = response.data;
        });
        this.open = true;
        this.title = "修改信息";
      });
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.formData.id != null) {
            api.update(this.formData).then((response) => {
              this.$message.success("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            api.add(this.formData).then((response) => {
              this.$message.success("新增成功");
              this.open = false;
              this.getList();
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      const ids = row.id || this.ids;
      this.$confirm({
        title: "确定要删除吗",
        content: '是否确认删除信息编号为"' + ids + '"的数据项？',
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk: async () => {
          await api.delete(ids);
          this.getList();
          this.$message.success("删除成功");
        },
        onCancel () {
          console.log("Cancel");
        },
      });
    },
    /** 导出按钮操作 */
    handleExport () {
      api.download(this.queryParams);
    },
    /** 上传 */
    handleUpload (e, target) {
      if (e.file && e.file.status == "done") {
        this.formData[target] = e.file.response.data.url;
        this.$message.success("附件上传成功");
      }
      this.fileList = [...e.fileList];
    },
  },
};
</script>
<style lang="less" scoped>
.app-container {
  background-color: #ffffff;
  padding: 17px 24px;

  .baseTop-title {
    margin-bottom: 10px;

    span {
      font-size: 22px;
      color: #303133;
    }
  }
}

.table {
  ::v-deep .ant-pagination {
    padding-right: 12px;
  }
}

::v-deep .ant-select {
  min-width: 194px;
}
</style>
